<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="~{commons/common::head(~{::title})}">
    <title>博客列表</title>
</head>
<body>
<!--后台一级导航栏-->
<div th:replace="~{commons/admin_com::menu(activeUrl='blogs.html')}"></div>

<br>
<!--中间部分-->
<div class="m-container m-padded-tb-big">
    <div class="ui container">

        <div class="ui top attached fluid segment">
            <div class="ui stackable grid vertical">
                <div class="ui sixteen wide column">
                    <!--搜索表单-->
                    <form th:action="@{/admin/blogs/search}" class="ui segment secondary basic form" method="post">
                        <div class="ui inline fields">
                            <!--标题-->
                            <div class="ui field">
                                <input type="text" name="title" placeholder="标题"/>
                            </div>
                            <!--分类-->
                            <div class="ui field">
                                <!--下拉选项-->
                                <div class="ui selection dropdown">
                                    <!--提交的 分类 隐藏域-->
                                    <input type="hidden" name="typeId">
                                    <i class="ui dropdown icon"></i>
                                    <div class="default text">分类</div>
                                    <div class="menu">
                                        <div th:each="type:${types}" th:text="${type.name}" class="item"
                                             th:data-value="${type.id}">Java
                                        </div>
                                    </div>

                                </div>
                            </div>
                            <!--推荐-->
                            <div class="ui field">
                                <div class="ui checkbox">
                                    <input type="checkbox" name="recommend" id="recommend">
                                    <label for="recommend">推荐</label>
                                </div>
                            </div>
                            <!--搜索按钮-->
                            <div class="ui field">
                                <button class="ui green basic medium button"><i
                                        class="search icon"></i>搜索
                                </button>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>

        <!--隐藏域 将Post请求方式装换成Delete-->
        <form action="" id="toDelete" method="post">
            <input type="hidden" name="_method" value="delete">
        </form>
        <!--删除提示-->
        <div class="ui success message" th:unless="${#strings.isEmpty(msg)}">
            <i class="close icon"></i>
            <div class="header">提示：</div>
            <p th:text="${msg}">恭喜，操作成功！</p>
        </div>

        <div class="ui teal segment">

            <!--博客列表-->
            <table class="ui compact celled table">
                <!--表头-->
                <thead>
                <tr>
                    <th></th>
                    <th>标题</th>
                    <th>分类</th>
                    <th>推荐</th>
                    <th>状态</th>
                    <th>更新时间</th>
                    <th>操作</th>
                </tr>
                </thead>
                <!--表体-->
                <tbody>
                <tr th:each="blog, iterStat:${pageInfo.list}">
                    <td th:text="${iterStat.count}">1</td>
                    <td th:text="${blog.title}">Java从入门到入坟</td>
                    <td th:if="${blog.type == null}">未分类</td>
                    <td th:if="${blog.type != null}" th:text="${blog.type.name}">Java</td>
                    <td th:text="${blog.recommend == '1' ? '是' : '否'}">是</td>
                    <td th:text="${blog.published == 1 ? '已发布' : '未发布'}"></td>
                    <td th:text="${#dates.format(blog.getUpdateTime(),'yyyy年MM月dd日 HH:mm')}">2020-03-05 14:33:00</td>
                    <td>
                        <a th:href="@{/admin/blogs/} + ${blog.id}" class="ui mini blue basic button">编辑</a>
                        <a th:href="@{/admin/blogs/} + ${blog.id}" id="deleteBlog"
                           class="ui mini red basic button" onclick="return confirm('确定要删除么?')" >删除</a>
                    </td>
                </tr>

                </tbody>
                <!--表脚-->
                <tfoot>
                <tr>

                    <th colspan="12">
                        <div class="ui right floated pagination mini menu">
                            <a th:href="@{/admin/blogs}" class="item"
                               th:classappend="${pageInfo.isFirstPage} ? 'disabled'">首页</a>

                            <a th:href="@{/admin/blogs(pageNum=${pageInfo.hasPreviousPage} ? ${pageInfo.prePage})}"
                               class="item" th:classappend="${pageInfo.isFirstPage} ? 'disabled'">上一页</a>

                            <a th:href="@{/admin/blogs(pageNum=${pageInfo.hasNextPage} ? ${pageInfo.nextPage})}"
                               class="item" th:classappend="${pageInfo.isLastPage} ? 'disabled'">下一页</a>

                            <a th:href="@{/admin/blogs(pageNum=${pageInfo.pages})}" class="item"
                               th:classappend="${pageInfo.isLastPage} ? 'disabled'">尾页</a>

                            <div class="ui right floated segment basic vertical m-inline-block">
                                <p>当前第<span th:text="${pageInfo.pageNum}"></span>页，总
                                    <span th:text="${pageInfo.pages}"></span>页，共<span
                                            th:text="${pageInfo.total}"></span>条记录</p>
                            </div>
                        </div>
                    </th>

                </tr>
                </tfoot>
            </table>

        </div>
    </div>

</div>

<br>

<!--底部 footer-->
<div th:replace="~{commons/common::footer}"></div>

<!--引用的 js-->
<th:block th:replace="~{commons/admin_com::script}">
</th:block>

<script>

    // 消息提示关闭初始化
    $('.message .close')
        .on('click', function () {
            $(this)
                .closest('.message')
                .transition('fade')
            ;
        });

    $(function () {
        // 当删除按钮点击时
        $("[id='deleteBlog']").click(
            function () {
                // 获取删除的超链接
                let href = $(this).attr("href");
                // 获取form表单
                let form = $("#toDelete");
                // 把form的action属性设置成href
                form.attr("action", href);
                // 提交表单
                form.submit();
                // 阻止原来的单击事件
                return false;
            }
        );
    });

    // 在手机端点击汉堡按钮，重新显示隐藏的导航栏内容
    $('.menu.toggle').click(function () {
        $('.m-item').toggleClass('m-mobile-hidden');
    });

    // 搜索框弹出消息
    $('.m-popup input').popup({
        on: 'focus',
        position: 'bottom center'
    });

    $('.ui.dropdown')
        .dropdown();


</script>
</body>
</html>